import { onMounted, onUnmounted } from "vue";
import type{Ref} from 'vue';
const userClickOutside = (containerElement:Ref<HTMLElement | undefined>,callback:(e:MouseEvent) => void) => {
  const handler = (e:MouseEvent) => {
    const target = e.target;
    if(!containerElement.value?.contains(target as HTMLElement)) {
      callback(e);
    }
  }
  onMounted(() => {
    document.addEventListener("click",(e) => handler(e));
  });
  onUnmounted(() => {
    document.removeEventListener("click",(e) => handler(e));
  });
}
export default userClickOutside;
